<template>
  <div class="hello">
    <div id="echarts" ref="chart" style="height: 400px;width: 600px" />
  </div>
</template>

<script>
import * as echarts from 'echarts' // 引入echarts
import ccs from '@/assets/json/city/ccs.json'
import { queryOrgGs } from '@/api/business/largeScreen'

export default {
  data() {
    return {
      printViewDialog: false,
      tempAae002: '',
      tempCjt100: '',
      currentDate: '',
      mapData: [
        { name: '吉林省农业科学院', value: [125.375698, 43.820834] },
        { name: '吴中天玺', value: [125.375719, 43.852687] },
        { name: '长春卫生大厦', value: [125.271177, 43.884601] },
        { name: '绿地海域中央墅', value: [125.376384, 43.82054] },
        { name: '北湖科技园', value: [125.397429, 43.98707] },
        { name: '西宸之光', value: [125.176098, 43.855937] }
      ]
    }
  },
  mounted() {
    this.initccs()
  },
  methods: {
    initccs() {
      // 获取图标 初始化
      var myChart = echarts.init(document.getElementById('echarts'))

      // 图标指定数据
      echarts.registerMap('ccs', ccs)

      queryOrgGs().then(res => {
        console.log('queryOrgGs:{}', res)
        const option = {
          // 鼠标移入显示的内容
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
          },
          legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['pm2.5'],
            textStyle: {
              color: '#fff'
            }
          },
          visualMap: {
            show: false,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1]
          },
          geo: [
            {
              // 指定图标为地图
              type: 'map',
              // 设置数据
              map: 'ccs',
              aspectScale: 1,
              zoom: 1,
              layoutCenter: ['50%', '50%'],
              layoutSize: '120%',
              // 开启缩放
              roam: true,
              // 设置缩放的大小
              scaleLimit: {
                min: 1.2,
                max: 30
              },
              // 自定义名称映射
              label: {
                normal: {
                  color: '#F4E925',
                  show: true
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: 'transparent',
                  borderColor: '#3fdaff',
                  borderWidth: 2,
                  shadowColor: 'rgba(63, 218, 255, 0.5)',
                  shadowBlur: 30
                },
                emphasis: {
                  areaColor: '#2B91B7'
                }
              }
            }
          ],
          series: [
            {
              /*        type: 'map',
                      // 跟geo关联
                      geoIndex: 0,*/
              name: '在地图中显示散点图',
              type: 'scatter',
              coordinateSystem: 'geo', // 设置坐标系为 geo
              // 设置人口的数据  用于显示在地图上
              data: res
            }
          ]
        }

        // 把option设置给myChart实例
        myChart.setOption(option, true)
        // 点击切换到省份
        myChart.on('click', function(params) {
          // 拿到点击的哪一个省份 用provinces里面对象的数据带到init方法里面用于渲染省份
          // this.changeTitle(params)
          console.log('params:', params)
        })
      })
    },
    remove() {
      this.initccs()
    }
  }

}

</script>

<style scoped>
</style>
